<script lang="ts" setup>
import { tableProps } from '@/constants/component-props'
import { useStudentDrawerTable } from './composables/useStudentDrawerTable'

import type { UserProfile } from '@/apis/user'
import type { TableSlotCell } from '@/types/components-tool'

const selectedStudents = defineModel<string[], 'selectedStudents'>()
const { columns, students, isLoading } = useStudentDrawerTable()
</script>

<template>
  <a-table
    class="-mx-4 -my-3"
    v-bind="tableProps"
    row-key="username"
    :stripe="false"
    v-model:selectedKeys="selectedStudents"
    size="small"
    :row-selection="{ showCheckedAll: true, fixed: true }"
    :columns
    :loading="isLoading"
    :data="students"
  >
    <template #th><th class="arco-table-thead py-0" /></template>
    <template #role="{ record: { role } }: TableSlotCell<UserProfile>">
      <RoleTag size="small" :role="role" />
    </template>
  </a-table>
</template>
